<template>
  <Modal class="fee-info-wrap" v-model="visible" @close="handleClose">
      <div class="title" v-if="titleShow">Management fee</div>
      <div class="list">
          <!--利息-->
          <div class="list-item">
              <span>Interest</span> <span>{{coin && '₱'}} {{fees.interest | formatCurrency(',')}}</span>
          </div>
          <!--账户管理费-->
          <div class="list-item">
              <span>Account Manage Fee</span> <span>{{coin && '₱'}} {{fees.accountServiceFee | formatCurrency(',')}}</span>
          </div>
          <!--平台服务费-->
          <div class="list-item">
              <span>Platform Service Fee</span> <span>{{coin && '₱'}} {{fees.platformServiceFee | formatCurrency(',')}}</span>
          </div>
          <!--风险管理费-->
          <div class="list-item">
              <span>Risk Fee</span> <span>{{coin && '₱'}} {{fees.riskServiceFee | formatCurrency(',')}}</span>
          </div>
          <!--征信查询费-->
          <div class="list-item">
              <span>Credit Fee</span><span>{{coin && '₱'}} {{fees.creditServiceFee | formatCurrency(',')}}</span>
          </div>
      </div>
  </Modal>
</template>
<script>
import Modal from '@/components/Modal'
export default {
  props: {
      value: false,
      coin: false,
      titleShow: true,
      fees: {
          type: Object,
          default: () => {
              return null
          }
      }
  },
  components:{
      Modal
  },
  data(){
      return {
          showFeeDetail:false,
          visible: false
      }
  },
  watch: {
      value: {
          handler (val) {
              this.visible = val
          },
          immediate: true
      }
  },
  methods: {
      handleClose () {
          this.$emit('input', false)
          this.$emit('close')
          this.visible = false
      }
  }
}
</script>
<style lang="scss" scoped>
@import '../feeDetails1/index.scss';
</style>